import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coordinate,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util,
  Interval
} from "bizcharts";
import DataSet from "@antv/data-set";

let data = [{
  "state": "TX",
  "小于5岁": 1,
  "5至13岁": 2,
  "14至17岁": 3,
  "18至24岁": 4,
  "25至44岁": 5,
  "45至64岁": 6,
  "65岁及以上": 7
}, {
  "state": "CA",
  "小于5岁": 8,
  "5至13岁": 9,
  "14至17岁": 7,
  "18至24岁": 6,
  "25至44岁": 5,
  "45至64岁": 4,
  "65岁及以上": 3
}]

const Chart1 = () => {

  // let ds = new DataSet({
  //   state: {
  //     currentState: "CA"
  //   }
  // });
  // let dvForAll = ds
  //   .createView('populationByAge')
  //   .source(data);

  // dvForAll.transform({
  //   type: "fold",
  //   fields: [
  //     "小于5岁",
  //     "5至13岁",
  //     "14至17岁",
  //     "18至24岁",
  //     "25至44岁",
  //     "45至64岁",
  //     "65岁及以上"
  //   ],
  //   key: "age",
  //   value: "population"
  // })

  // // .transform({
  // //   type: "map",
  // //   callback: (row) => {
  // //     row.population = parseInt(row.population, 10);
  // //     return row;
  // //   }
  // // });

  // let dvForOneState = ds.createView('populationForOneState').source(dvForAll);
  // dvForOneState.transform({
  //   // 过滤数据
  //   type: "filter",
  //   callback(row) {
  //     return row.state === ds.state.currentState;
  //   }
  // }).transform({
  //   type: "percent",
  //   field: "population",
  //   dimension: "age",
  //   as: "percent"
  // });

  // ds.on('statechange', (name, value) => {
  //   console.log(`state ${name}'s value has been changed to ${value}!`)
  // });


  // console.log("%c Line:91 🍑 ds.views", "color:#ffdd4d", ds.views);
  // console.log("%c Line:93 🍒 ds.state", "color:#2eafb0", ds.state);

  // return (
  //   <div>
  //     <div>
  //       <Chart
  //         data={dvForAll}
  //         height={400}
  //         autoFit
  //         onTooltipChange={(evt) => {
  //           console.log("%c Line:102 🍢 evt", "color:#ea7e5c", evt);
  //           const items = evt.data.items || [];
  //           if (items[0]) {
  //             ds.setState('currentState', items[0].title);
  //           }
  //         }
  //         }
  //       >
  //         <Legend position='top' />
  //         <Axis name="population" label={{
  //           formatter: val => {
  //             return val / 1000000 + 'M';
  //           }
  //         }} />
  //         <Geom
  //           type="interval"
  //           adjust="stack"
  //           position="state*population"
  //           color="age"
  //           select={[true, {
  //             mode: 'single',
  //             style: {
  //               stroke: 'red',
  //               strokeWidth: 5
  //             }
  //           }]}
  //         />
  //       </Chart>
  //       <Chart
  //         data={dvForOneState}
  //         height={300}
  //         autoFit={true}
  //         padding={0}
  //       >
  //         <Coordinate type='theta' radius={0.8} />
  //         <Geom
  //           type="interval"
  //           adjust="stack"
  //           position="percent"
  //           color="age"
  //           label={['age*percent', (age, percent) => {
  //             percent = (percent * 100).toFixed(2) + '%';
  //             return age + ' ' + percent;
  //           }]}
  //         />
  //       </Chart>
  //     </div>
  //   </div>
  // );

  let ds = new DataSet({
    state: {
      currentState: "TX"
    }
  });
  let dvForAll = ds
    .createView("populationByAge", {
      watchingStates: [] // 用空数组，使得这个实例不监听 state 变化
    }) // 在 DataSet 实例下创建名为 populationByAge 的数据视图
    .source(data);
  dvForAll
    .transform({
      // 合并列
      type: "fold",
      fields: [
        "小于5岁",
        "5至13岁",
        "14至17岁",
        "18至24岁",
        "25至44岁",
        "45至64岁",
        "65岁及以上"
      ],
      key: "age",
      value: "population"
    })
    .transform({
      type: "map",
      callback: function (row) {
        row.population = parseInt(row.population, 10);
        return row;
      }
    });
  let dvForOneState = ds.createView("populationForOneState").source(dvForAll);
  dvForOneState
    .transform({
      // 过滤数据
      type: "filter",
      callback: function (row) {
        return row.state === ds.state.currentState;
      }
    })
    .transform({
      type: "percent",
      field: "population",
      dimension: "age",
      as: "percent"
    });

  return (
    <div>
      <div>
        <Chart
          data={dvForAll}
          height={400}
          forceFit={true}
          onTooltipChange={evt => {
            console.log(111);
            const items = evt.items || [];

            if (items[0]) {
              ds.setState("currentState", items[0].title);
            }
          }}
        >
          <Legend position="top" offsetY={10} />
          <Tooltip />
          <Axis
            name="population"
            label={{
              formatter: val => {
                return val / 1000000 + "M";
              }
            }}
          />
          <Geom
            type="intervalStack"
            position="state*population"
            color="age"
            select={[
              true,
              {
                mode: "single",
                style: {
                  stroke: "red",
                  strokeWidth: 5
                }
              }
            ]}
          />
        </Chart>
        <Chart data={dvForOneState} height={300} forceFit={true} padding={0}>
          <Coord type="theta" radius={0.8} />
          <Tooltip />
          <Geom type="intervalStack" position="percent" color="age">
            <Label
              content={[
                "age*percent",
                (age, percent) => {
                  percent = (percent * 100).toFixed(2) + "%";
                  return age + " " + percent;
                }
              ]}
            />
          </Geom>
        </Chart>
      </div>
    </div>
  );
}


export default Chart1